import React, { Component } from 'react'
import Dialog from './Dialog'
import qr from '../../assets/qr.png'
export default class Parent extends Component {
    state={
        msg1: '扫码',
        msg2: '输入',
        isShow1 : false,
        isShow2 : false
    }
    showQrLogin =() => {
        this.setState({
            isShow1 : true
        })
    }
    showInputLogin = ()=>{
        this.setState({
            isShow2 : true
        })
    }
    closeDialog = () => {
        this.setState({
            isShow1 : false,
            isShow2 : false
        })
    }
  render() {
    return (
      <div>
        <h1>父组件</h1>
        <button onClick={this.showQrLogin}>扫码登录</button>
        <button onClick={this.showInputLogin}>账号登录</button>
        {/* <Dialog>
            <img src={qr} alt="" srcset="" />
        </Dialog> */}
        {
            this.state.isShow1 ? <Dialog msg={this.state.msg1} closeDialog={this.closeDialog}> <img src={qr} alt="" srcset="" /></Dialog> : null
            
        }   
        {
            this.state.isShow2 ? <Dialog msg={this.state.msg2} closeDialog={this.closeDialog}><form action="#">
                <p>
                    <label>账号 : </label>
                    <input type="text" name="username" />
                </p>
                <p>
                    <label>密码 : </label>
                    <input type="password" name="password" />
                </p>
                </form>
            </Dialog> : null
        }
      </div>
    )
  }
}
